<template>
	<el-descriptions class="margin-top" title="公众监督数据详情" :column="1" border>
		<template #extra>
			<el-button type="primary">返回</el-button>
		</template>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					公众监督反馈信息编号
				</div>
			</template>
			{{detailData.afId}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<iphone />
					</el-icon>
					反馈者信息
				</div>
			</template>
			<el-tag size="small">{{detailData.realName}}</el-tag>
			<el-tag size="small">{{detailData.sex}}</el-tag>
			<el-tag size="small">{{detailData.birthday}}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<location />
					</el-icon>
					反馈者联系电话
				</div>
			</template>
			{{detailData.telId}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<tickets />
					</el-icon>
					反信息所在地址
				</div>
			</template>
			<el-tag size="small">{{detailData.provinceName}}</el-tag>
			<el-tag size="small">{{detailData.cityName}}</el-tag>
			<el-tag size="small">{{detailData.address}}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<office-building />
					</el-icon>
					反馈信息描述
				</div>
			</template>
			{{detailData.information}}
		</el-descriptions-item>
	</el-descriptions>
	<el-descriptions-item>
		<template #label>
			<div class="cell-item">
				<el-icon :style="iconStyle">
					<tickets />
				</el-icon>
				预估等级
			</div>
		</template>
		<el-tag size="small">{{detailData.chineseExplain}}</el-tag>
		<el-tag size="small">{{detailData.aqiExplain}}</el-tag>
	</el-descriptions-item>
	<el-descriptions-item>
		<template #label>
			<div class="cell-item">
				<el-icon :style="iconStyle">
					<tickets />
				</el-icon>
				反馈日期时间
			</div>
		</template>
		<el-tag size="small">{{detailData.afDate}}</el-tag>
		<el-tag size="small">{{detailData.afTime}}</el-tag>
	</el-descriptions-item>
</template>

<script setup>
	import {
		inject,
		reactive,
		ref
	} from "vue"
	import {
		useRouter,
		useRoute
	} from "vue-router";
	const afId = ref(0);
	const route = useRoute();
	const axios = inject("axios");
	const detailData = ref({})

	function loadData() {
		console.info(JSON.stringify(route.query))
		let url = "/api/aqi/feedbackDetail?afId=" + route.query.afId;
		axios.get(url).then((r) => {
			if (r.data.ok) {
				detailData.value = r.data.data.detail;
			}
		})
	}
	loadData();
</script>

<style scoped>
	.two-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 25px 0;
	}
</style>